Google Maps JavaScript API Cookbook by Dec 2013

Author:Dec 2013
Language: eng
Format: epub
Publisher: Packt Publishing

Then, we will set a prototype of the ContextMenu class to an object created from the google.maps.OverlayView class:

ContextMenuClass.prototype = new google.maps.OverlayView();

The google.maps.OverlayView class has three methods to be implemented in our newly created class: onAdd(), draw(), and onRemove(). In addition to these methods, we add two methods to show or hide the context menu. Each method's mission is explained as follows:

onAdd(): The creation of DOM objects and appending them as children of the panes is done in this method. We will create a div object with the CSS class defined at the top of the HTML. Menu items are also added to this div object with the innerHTML property. We will also create an event listener of map clicks to remove the context menu from other actions:ContextMenuClass.prototype.onAdd = function () { var that = this; this.menuDiv = document.createElement('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = '<a href="javascript:createMarker()">Create Marker Here</a><br><a href="javascript:zoomIn()">Zoom In</a><br><a href="javascript:zoomOut()">Zoom Out</a><br>'; this.getPanes().floatPane.appendChild(this.menuDiv); //This event listener below will close the context menu // on map click google.maps.event.addListener(this.map, 'click', function(mouseEvent){ that.hide(); }); };

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.